<template>
  <div class="login-panel">
    <h1 class="login-title">RT 后台管理系统</h1>

    <el-tabs type="border-card" stretch>
      <el-tab-pane>
        <template #label>
          <span>
            <el-icon><avatar /></el-icon>账号登陆
          </span>
        </template>

        <login-account />
      </el-tab-pane>

      <el-tab-pane>
        <template #label>
          <span>
            <el-icon><iphone /></el-icon>手机登陆
          </span>
        </template>
        <login-phone />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import LoginPhone from './login-phone.vue'
import LoginAccount from './login-account.vue'
import { Avatar, Iphone } from '@element-plus/icons-vue'
export default defineComponent({
  name: 'LoginPanel',
  components: { Avatar, Iphone, LoginPhone, LoginAccount },
  setup () {
    return {}
  }
})
</script>

<style scoped lang="less">
.login-panel {
  margin-bottom: 150px;
  width: 320px;

  .login-title {
    text-align: center;
  }
}
</style>
